<template>
  <div class="cart">
    <div class="table">
      <div class="row">
        <div class="col col-1">
          <i
            class="iconfont icon-yduifuxuankuang"
            v-show="!checkall"
            @click="checkall = !checkall"
          ></i>
          <i
            class="iconfont icon-yduifuxuankuangxuanzhong"
            v-show="checkall"
            @click="checkall = !checkall"
          ></i>
        </div>
        <div class="col col-2">礼品信息</div>
        <div class="col col-3">兑换分数</div>
        <div class="col col-4">数量</div>
        <div class="col col-5">小计 (鸡腿)</div>
        <div class="col col-6">操作</div>
      </div>
      <div class="row" v-for="item in cart" :key="item.id">
        <div class="col col-1">
          <i
            class="iconfont icon-yduifuxuankuang"
            v-show="!item.isshow"
            @click="item.isshow = !item.isshow"
          ></i>
          <i
            class="iconfont icon-yduifuxuankuangxuanzhong"
            v-show="item.isshow"
            @click="item.isshow = !item.isshow"
          ></i>
        </div>
        <div class="col col-2">
          <img :src="imgBaseURL + item.coverImg" alt="" />
          <div style="padding-left: 20px">
            <h5>{{ item.title }}</h5>
            <p>{{ item.versionDescription }}</p>
          </div>
        </div>
        <div class="col col-3">{{ item.coin }}鸡腿</div>
        <div class="col col-4">
          <div class="counter">
            <span @click="sub(item)">-</span>
            <input type="text" v-model="item.total" />
            <span @click="add(item)">+</span>
          </div>
        </div>
        <div class="col col-5">{{ item.coin * item.total }}鸡腿</div>
        <div class="col col-6">
          <div class="del btn" @click="del(item)">删除</div>
        </div>
      </div>
      <div>总计{{ total }}</div>
    </div>
    <Confirm
      message="确定要删除该商品吗？"
      :show="confirmShow"
      @sure="doDel"
      @cancel="confirmShow = false"
    />
  </div>
</template>
<script>
import { getcartsapi, getdeleteapi, getaddcartapi } from "@/request/api";
import { imgBaseURL } from "@/request/constant.js";
import Confirm from "@/views/components/Confirm.vue";
import { mapMutations } from "vuex";
// 引入数据然后在data里面实例化
export default {
  data() {
    return {
      imgBaseURL,
      cart: [],
      confirmShow: false,
      timer: null,
      deleteId: 0,
      cartlength: null,
    };
  },
  created() {
    console.log(this.cart);
    this.refech();
    // 购物车数据刷新
  },
  components: {
    Confirm,
  },
  methods: {
    ...mapMutations({
      cartchange: "user/cartchange",
    }),
    refech() {
      getcartsapi().then((res) => {
        if (res.code === 0) {
          this.cart = res.data.map((item) => {
            // 添加input的框，因为这不可以自定制
            item.isshow = true;
            return item;
          });
          // console.log(this.cart.length);
        }
      });
    },
    add(item) {
      // 增加按钮
      item.total++;
      this.updateTotal(item.id, item.total);
    },
    sub(item) {
      // 删除按钮
      if (item.total <= 1) {
        return;
      }
      item.total--;
      this.updateTotal(item.id, item.total);
    },
    doDel() {
      // 子组件删除
      this.confirmShow = false;
      //   删除组件
      getdeleteapi(this.deleteId).then((res) => {
        if (res.code === 0) {
          this.cartlength--;
          // console.log(this.cartlength);
          this.cartchange({ cartTotal: this.cartlength });
          this.refech();
        }
      });
    },
    del(item) {
      // 删除购物车
      this.cartlength = this.cart.length;
      this.confirmShow = true;
      this.deleteId = item.id;
    },
    // 购物车上传数量
    updateTotal(productId, total) {
      clearInterval(this.timer);
      this.timer = setTimeout(() => {
        getaddcartapi({
          productId,
          total,
          modified: 1,
        }).then((res) => {
          if (res.code == 400) {
            // 弹框
            let target = this.cartList.find((item) => item.id === productId);
            if (target) {
              target.total = 5;
            }
          }
        });
      }, 5000);
    },
  },
  computed: {
    checkall: {
      get() {
        // 如果 this.cart 里面的某一个人 isShow 为 false ，返回 false
        return this.cart.every((item) => item.isshow);
      },
      set(val) {
        this.cart.map((item) => (item.isshow = val));
      },
    },
    total() {
      let ref = this.cart.reduce((pre, cur) => {
        if (cur.isshow) {
          return (pre += cur.coin * cur.total);
        } else {
          return pre;
        }
      }, 0);
      return ref;
    },
  },
};
</script>
<style lang="less" scoped>
.cart {
  width: 930px;
  padding: 0 40px;
  .table {
    border: 1px solid #ccc;
    .row {
      display: flex;

      &:first-child {
        font-weight: 700;
        background: #e7e7e7;
      }
      &:nth-child(n + 2) {
        color: #666;
      }

      .col {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px 0;
        img {
          height: 80px;
        }
        i {
          cursor: pointer;
          color: #ccc;
        }
        .icon-yduifuxuankuangxuanzhong {
          color: #0c0;
        }
        h5 {
          color: #333;
          font-size: 18px;
          line-height: 24px;
        }
        p {
          font-size: 14px;
          line-height: 18px;
        }
      }
      .col-1 {
        width: 50px;
      }
      .col-2 {
        flex: 1;
        justify-content: flex-start;
      }
      .col-3 {
        width: 136px;
      }
      .col-4,
      .col-5 {
        width: 140px;
      }
      .col-6 {
        width: 100px;
      }
      .counter {
        display: flex;
        span {
          width: 30px;
          height: 30px;
          border: 1px solid #ccc;
          text-align: center;
          line-height: 30px;
          cursor: pointer;
        }
        input {
          width: 45px;
          height: 30px;
          border: 0 none;
          border-top: 1px solid #ccc;
          border-bottom: 1px solid #ccc;
        }
      }
      .btn {
        padding: 6px 10px;
        border: 1px solid #ccc;
        border-radius: 4px;
        cursor: pointer;
      }
    }
  }
}
</style>